import React from 'react';
import Piece from './Piece';
import './Board.css';

const terrainStyle = {
  NORMAL: '',
  DEN: 'den',
  TRAP: 'trap',
  RIVER: 'river',
};

function isMovableCell(movables, i, j) {
  return movables && movables.some(m => m.x === i && m.y === j);
}

export default function Board({ board, selected, movables = [], onCellClick, lastMove }) {
  return (
    <div className="board">
      {board.map((row, i) => (
        <div className="board-row" key={i}>
          {row.map((cell, j) => {
            const isSelected = selected && selected.x === i && selected.y === j;
            const isMovable = isMovableCell(movables, i, j);
            const animate = lastMove && lastMove.to && lastMove.to.x === i && lastMove.to.y === j;
            return (
              <div
                className={`board-cell ${terrainStyle[cell.terrain]}${isSelected ? ' selected' : ''}${isMovable ? ' movable' : ''}`}
                key={j}
                onClick={() => onCellClick(i, j)}
              >
                {cell.piece && <Piece piece={cell.piece} animate={animate} />}
                {!cell.piece && cell.terrain === 'DEN' && <span className="terrain-icon">▲</span>}
                {!cell.piece && cell.terrain === 'TRAP' && <span className="terrain-icon">※</span>}
                {!cell.piece && cell.terrain === 'RIVER' && <span className="terrain-icon">≈</span>}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
} 